<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Metadata Datatable</title>

        <script src="../../../res/js/lib/jquery-2.1.1.js" th:src="@{/res/js/lib/jquery-2.1.1.js}" type="text/javascript"></script>

        <script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.js" type="text/javascript"></script>
        <link href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
        <link href="../../../res/css/datatables/cmt_datatables.css" th:href="@{/res/css/datatables/cmt_datatables.css}" rel="stylesheet" type="text/css" />

        <script src="../../../res/js/datatables/init.js" th:src="@{/res/js/datatables/init.js}"></script>
        <script src="../../../res/js/datatables/util.js" th:src="@{/res/js/datatables/util.js}"></script>
    </head>
    <body>
        <th:block th:fragment="datatable (all_metadata)">
            <table id="metadata" class="display">
                <thead>
                    <tr>
                        <th>Product ID</th>
                        <th>Indentifier</th>
                        <th>Metadata ID</th>
                        <th>Value</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="metadata : ${all_metadata}">
                        <td th:text="${metadata.id}"></td>
                        <td th:text="${metadata.productId}"></td>
                        <td th:text="${metadata.indentifier}"></td>
                        <td th:text="${metadata.value}"></td>
                        <td>
                            <div style="float: left">
                                <form style="display: inline-block" th:action="${'/metadata/edit/' + metadata.id}" method="GET">
                                    <input type="submit" value="Edit" />
                                </form>
                                <form style="display: inline-block" th:action="${'/metadata/delete/' + metadata.id}" method="GET">
                                    <input type="submit" value="Delete" />
                                </form>
                            </div>
                            <div style="clear: both" />
                        </td>
                    </tr>
                </tbody>
            </table>
            <script type="text/javascript">
                // configure datatable
                $(document).ready(function () {
                    var metadataIdCol = 0;
                    var productIdCol = 1;
                    var identifierCol = 2;
                    var valueCol = 3;
                    var actionsCol = 4;

                    var columnDefs = [];
                    { // product metadata list links
                        var detailBaseUrl = "/metadata/product/";
                        var linkColumn = productIdCol;
                        var idColumn = productIdCol;
                        var releaseDetailsDef = cmt.datatables.createColumnDefByRenderingColumnAsLinkToId(idColumn, linkColumn, detailBaseUrl);
                        columnDefs = columnDefs.concat(releaseDetailsDef);
                    }
                    { // metadata detail links
                        var detailBaseUrl = "/metadata/";
                        var linkColumn = identifierCol;
                        var idColumn = metadataIdCol;
                        var releaseDetailsDef = cmt.datatables.createColumnDefByRenderingColumnAsLinkToId(idColumn, linkColumn, detailBaseUrl);
                        columnDefs = columnDefs.concat(releaseDetailsDef);
                    }

                    $("#metadata").dataTable({
                        "columnDefs": columnDefs,
                        "order": [[1, "asc"]]
                    });
                });
            </script>
        </th:block>
    </body>
</html>
